<template>
  <div class="task-timeline-item item-font-size">
    <check-circle-outlined style="align-self: center; color: #52c41a" v-if="checked"/>
    <sync-outlined style="align-self: center" v-if="!checked"/>
    <el-tooltip :content="getContent" effect="customized" :disabled="!isShowTooltip" placement="top" :visible-arrow="false">
      <a-typography-text
          :ellipsis="true"
          class="task-item-text"
          v-model:content="getDescription"
          style="align-self: center; font-size: 16px; height: 45px; line-height: 45px"
          :class="{'gray-text' : checked}"
          @mouseenter="visibilityChange($event)"
      />
    </el-tooltip>
    <a-row style="flex-wrap: nowrap">
      <a-space>
        <div :title="item.suffix.join(' ')" style="display: flex; align-self: center; justify-content: center">
          <a-tag
              style="margin-right: 2px; color: gray; width: 80px; overflow: hidden; text-align: center; text-overflow: ellipsis">
            {{ item.suffix.join(' ') }}
          </a-tag>
        </div>
        <div class="tag-icon-div ">
          <a-tag class="tag-icon-timeline" :visible="getPriorityVisible" :style="{color: getColorByPriority}">
            <bell-filled/>
          </a-tag>
        </div>
        <div class="tag-icon-div ">
          <a-tag class="tag-icon-timeline" :visible="item.star" style="color: orange">
            <star-filled/>
          </a-tag>
        </div>
      </a-space>
    </a-row>
  </div>
</template>

<script>
import { BellFilled, StarFilled, CheckCircleOutlined, SyncOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';

export default {
  setup() {
    const checked = ref(false);
    const drawerVisible = ref(false);
    const inputValue = ref('');
    const labelCol = {
      style: {
        width: '80px'
      }
    };
    const wrapperCol = {
      span: 14,
    };
    const selectValue = ref("");
    const switchChecked = ref(false)
    const isShowTooltip = ref(false);

    return {
      checked,
      drawerVisible,
      inputValue,
      labelCol,
      wrapperCol,
      selectValue,
      switchChecked,
      isShowTooltip
    }
  },
  mounted() {
    this.checked = this.item.isComplete;
    this.inputValue = this.getContent;
    this.selectValue = String(this.getPriority());
    this.switchChecked = this.item.star !== '';
    this.drawerVisible = this.openDrawer;
  },
  methods: {
    getPriority() {
      const reg1 = /^.+ \(!\)$/;
      const reg2 = /^.+ \(!!\)$/;
      if (reg1.test(this.item.message)) {
        return 2;
      }
      if (reg2.test(this.item.message)) {
        return 3;
      }
      return 1;
    },
    visibilityChange(event) {
      const ev = event.target;
      const ev_weight = ev.scrollWidth; // 文本的实际宽度   scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
      const content_weight = ev.clientWidth;// 文本的可视宽度 clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
      this.isShowTooltip = ev_weight > content_weight;
    }
  },
  components: {
    BellFilled,
    StarFilled,
    CheckCircleOutlined,
    SyncOutlined
  },
  props: {
    item: Object
  },
  computed: {
    getDescription() {
      return `${this.item.prefix} ${this.item.message.replace(/ \(!+\)/, "")}`;
    },
    getContent() {
      return `${this.item.message.replace(/ \(!+\)/, "")}`;
    },
    getColorByPriority() {
      const priority = this.getPriority();
      if (priority === 2) {
        return 'orange';
      }
      if (priority === 3) {
        return 'red';
      }
      return '';
    },
    getPriorityVisible() {
      const priority = this.getPriority();
      return priority !== 1;
    },
  }
}
</script>

<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 16px 16px;
  background-image: linear-gradient(to right, #0075df, #0085e5, #0094e9, #00a2eb, #00afec);
  font-size: 16px;
  max-width: 500px;
  color: #DBF2FF;
}

.el-popper.is-customized .el-popper__arrow::before {
  background-image: linear-gradient(to right, #0075df, #0085e5, #0094e9, #00a2eb, #00afec);
  right: 0;
}
</style>